<template>
<transition name="fade">
  <div class="box">
    <header class="com-header">
      <mt-header title="社区">
        <router-link to="/life/follow" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
        <mt-button class="iconfont icon-ai-search" slot="right"></mt-button>
      </mt-header>
    </header>
    <div class="content">
      <div class="com-banner">
      </div>
      <div class="com-nav">
        <ul>
          <router-link to="/community/ready" tag="li"><i class="iconfont icon-shenghuofuwu"></i><span>备孕</span></router-link>
          <router-link to="/community/pregnant" tag="li"><i class="iconfont icon-yunfu"></i><span>孕期</span></router-link>
          <router-link to="/community/cart-baby" tag="li"><i class="iconfont icon-weibiaoti202-copy"></i><span>育儿</span></router-link>
          <router-link to="/community/family" tag="li"><i class="iconfont icon-13"></i><span>家常</span></router-link>
          <router-link to="/community/travel" tag="li"><i class="iconfont icon-lvhang-"></i><span>旅行</span></router-link>
        </ul>
      </div>
      <div class="com-list">
        <router-view></router-view>
      </div>
    </div>
  </div>
</transition>
</template>

<script>

export default {
  // data () {
  //   return {
  //   }
  // },
  // methods: {
  // }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
  .com-header {
    @include rect(100%, 0.4rem);
    line-height: 0.20rem;
    text-align: center;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
    font-family: Arial;
    border: 1px solid rgba(255, 255, 255, 0);
    .mint-header {
      background-color: rgba(249, 249, 249, 1);
      h1, .mint-header-button{
        color: rgba(100, 100, 100, 1);
        font-size: 0.16rem;
        .icon-ai-search {
          font-size: 0.16rem;
        }
        .mintui-back {
          font-weight: 900;
        }
      }
    }
  }
  .content {
    .com-banner {
      @include rect(100%, 1.6rem);
      background: url(./../../assets/baike2.jpg) no-repeat 0 0;
      background-size: 100% 100%;
    }
    .com-nav {
      @include rect(100%, 0.7rem);
      margin-bottom: 0.15rem;
      ul {
        margin-top: -0.2rem;
        @include flexbox();
        @include justify-content(space-around);
        li {
          @include flexbox();
          @include flex-direction(column);
          @include align-items();
          &.router-link-active {
            i {
              background-color: rgba(255, 255, 255, 0.877);
            }
            span {
              color: rgb(228, 133, 133);
            }
          }
          i {
            @include rect(0.44rem, 0.44rem);
            @include justify-content();
            background-color: rgba(250, 229, 211, 0.877);
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0);
            border-radius: 50%;
            font-size: 0.28rem;
            color: #fff;
          }
          .icon-shenghuofuwu {
            color: rgb(247, 99, 99);
          }
          .icon-yunfu {
            color: rgb(247, 128, 128);
          }
          .icon-weibiaoti202-copy {
            color: rgb(163, 158, 83);
          }
          .icon-lvhang- {
            color: rgb(112, 181, 212);
          }
          .icon-13 {
            color: rgb(160, 68, 91);
          }
          span {
            display: inline-block;
            margin-top: 0.06rem;
            color: rgba(166, 164, 164, 1);
            font-size: 0.12rem;
            text-align: center;
            box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
            font-family: Arial;
            border: 1px solid rgba(255, 255, 255, 0);
          }
        }
      }
    }
  }
</style>
